<template>
    <div class="header">
        <div class="header-title">
            <div class="header-left">
                <div class="iconfont back-icon">
                    <img src="../../../static/img/logo.png" alt="">
                </div>
            </div>
            <div class="header-input">
                <!--<button v-on:click="test"></button>-->
            </div>
        </div>
        <div class="header-right">
            <span class="iconfont header-caidan">&#xe64e;</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        methods:{
            test:function () {
                mui.alert('Test','Title',function () {
                    mui.alert('在来一次','再来一次1');
                });
            }
        },
    }
</script>

<style lang="stylus"  type="text/stylus" scoped>
    @import "../../assets/css/varibles.styl"
    .header
        display:flex
        line-height : 1rem
        background-color: #727ce0
        color:#fff
        height: 1.67rem
        padding-top:.6rem
        .header-title
            display:flex
            height: 1rem
        .header-left
            width 1.6rem
            float: left
            .back-icon>img
                position : relative
                width:.8rem
                height:.6rem
                top :-.15rem
                left:.3rem
        .header-input
            flex :1
            width : 6.8rem
            height : .6rem
            background #ffffff
            border-radius:.5rem
            color:#ccc
        .header-right
            width: 1.6rem
            float: right
            text-align center
            .header-caidan
                position: relative;
                top: -0.15rem;
        .arrow-icon
            font-size:.24rem
            margin-left :-.04rem
</style>